---
type: tutorial
title: Combina plantillas para obtener lo mejor de ambos mundos
i18nReady: true
description: |-
  Tutorial: Crea tu primer blog con Astro —
  Agrega tu plantilla de página básica a la plantilla que formatea tus publicaciones de blog.
---
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Ahora que ya has añadido una plantilla a cada entrada del blog, ¡es hora de hacer que tus entradas del blog se parezcan al resto de páginas de tu sitio web!

<PreCheck>
  - Anidar la plantilla de tus publicaciones de blog dentro de la plantilla principal de tu página
</PreCheck>

## Anida tus dos plantillas

Ya tienes un `BaseLayout.astro` para definir la plantilla general de tus páginas. 

El `MarkdownPostLayout.astro` te proporciona algunas plantillas adicionales para las propiedades comunes de las publicaciones de tu blog, como `title` y `date`, pero las publicaciones de tu blog no tienen el mismo aspecto que el resto de páginas de tu sitio. Puedes adaptar el aspecto de las entradas de tu blog al resto de tu sitio **anidando plantillas**.

<Steps>
1. En `src/layouts/MarkdownPostLayout.astro`, importa `BaseLayout.astro` y úsalo para envolver todo el contenido de la plantilla. No olvides pasar la propiedad `pageTitle`:

    ```astro title="src/layouts/MarkdownPostLayout.astro" ins={2,5,12}
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Escrito por: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

2. Comprueba la vista previa de tu navegador en `http://localhost:4321/posts/post-1`. Ahora debería ver el contenido renderizado por:

    - Tu **plantilla de página principal**, incluyendo tus estilos, enlaces de navegación y pie de página social.
    - Tu **plantilla de plublicación de blog**, incluyendo propiedades del frontmatter como la descripción, fecha, título e imagen.
    - Tu **contenido individual en formato Markdown de tu publicación de blog**, incluyendo sólo el texto escrito en esta publicación.

3. Observa que el título de tu página se muestra ahora dos veces, una por cada plantilla.

    Elimina la línea que muestra el título de tu página de `MarkdownPostLayout.astro`:

    ```astro title="src/layouts/MarkdownPostLayout.astro" del={2}
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Escrito por: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

4. Comprueba de nuevo la vista previa de tu navegador en `http://localhost:4321/posts/post-1` y verifica que esta línea ya no aparece y que su título sólo se muestra una vez. Realiza cualquier otro ajuste necesario para asegurarte de que no tienes contenido duplicado.
</Steps>


  Asegúrate de que:

    - Cada publicación muestra la misma plantilla de página y no falta contenido. (Si a una de tus publicaciones le falta contenido, comprueba sus propiedades frontmatter).

    - Ningún contenido se duplica en una página. (Si algo se está renderizando dos veces, asegúrate de eliminarlo de `MarkdownPostLayout.astro`).

    Si quieres personalizar la plantilla de tu página, puedes hacerlo.


<Box icon="question-mark">

### Pon a prueba tus conocimientos

1. Esto le permite anidar una plantilla dentro de otra y aprovechar las ventajas de trabajar con piezas modulares.

    <MultipleChoice>
      <Option>
        despliegue continuo
      </Option>
      <Option>
        diseño adaptable
      </Option>
      <Option isCorrect>
        diseño basado en componentes
      </Option>
    </MultipleChoice>

2. Las plantillas múltiples son especialmente útiles para proyectos que contienen páginas Markdown, como...

    <MultipleChoice>
      <Option isCorrect>
        blog
      </Option>
      <Option>
        panel de control
      </Option>
      <Option>
        aplicación de chat
      </Option>
    </MultipleChoice>

3. ¿Cuál de ellos proporciona plantillas para todas tus páginas?

    <MultipleChoice>
      <Option>
        `index.astro`
      </Option>
      <Option isCorrect>
        `BaseLayout.astro`
      </Option>
      <Option>
        `post-1.md`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Puedo anidar plantillas, comprobando si hay elementos duplicados.
</Checklist>
</Box>

### Recursos

- [Plantillas anidadas en Astro](/es/basics/layouts/#plantillas-anidadas)
